<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传值</title>
</head>
<body>
    <!-- 
        参考学习： 
        https://cn.vuejs.org/guide/essentials/component-basics.html#components-basics
       
        父向子传值：
            声明：子组件声明 props: ['title']
            使用：父组件使用 title="abc"

        子向父传值：
            定义事件：在父组件使用组件的地方定义事件，如：@change="changeContent"
            触发事件：在子组件中使用this.$emit('change',99999)触发事件
    -->
    <script src="../vue.global.prod.js"></script>

    <div id="app">
     <h1>{{ message }}</h1>
     <!-- 3.使用组件 -->
     <child-comp title="abc" :value="message" @change="changeContent"></child-comp>
    </div>

    <script type="module">

        console.log(Vue);

        // 1.引入组件
        import ChildComp from './ChildComp.js'

        // 对象解构，从Vue对象中获取createApp函数
        const { createApp } = Vue


        // 通过createApp函数创建一个app对象(vue实例)
        const app = createApp({
            data() {
                return {
                    message: 'Hello World!'
                }
            },
            components: {
                // 2.注册组件
                ChildComp
            },
            methods: {
                changeContent(param){
                    this.message = param
                }
            },

        })

        // app对象挂载到id="app"的HTML元素，关联起来
        app.mount('#app')

    </script>

</body>
</html>